<!DOCTYPE html>
<html>
<head>
	<title>梦舟影业首页</title>
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		#fullpage{
			width:100%;
			height:100%;
			overflow: hidden;
			position:relative;
		}
		.section{
			width:100%;
			height:100%;
		}
		.section ul li{
			list-style: none;
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			right:0;
		}
		.section ul li:nth-child(1){
			background: url('./section1_banner1.jpg') no-repeat;
			background-size:100%;
		}
		.section ul li:nth-child(2){
			background: url('./section1_banner2.jpg') no-repeat;
			background-size:100%;
		}
		.section ul li:nth-child(3){
			background: url('./section1_banner3.jpg') no-repeat;
			background-size:100%;
		}
		.section ul li img{
			width:100%;
			height:100%;
		}
		#menu_bar{
			width:1px;
			height:40px;
			background: rgba(255,255,255,.3);
			position:absolute;
			top:0;
			right:30px;
			z-index:2;
		}
		#menu_box{
			width:60px;
			height:60px;
			border:1px solid rgba(255,255,255,.3);
			border-radius:50%;
			position:absolute;
			top:40px;
			right:0px;
			z-index: 2;
		}
		#menu_box .menu_list{
			width:32px;
			height:32px;
			/*background: yellow;*/
			margin:20px 14px;
		}
		.menu_list .line{
			margin-top:5px;
			height:2px;
			width:2px;
			background: #fff;
			animation: sound 0ms -2.5s linear infinite alternate;
		}
		.menu_list .line:nth-child(1){
			width:23px;
			animation-duration: 474ms;
		}
		.menu_list .line:nth-child(2){
			width:23px;
			animation-duration: 433ms;
		}
		.menu_list .line:nth-child(3){
			width:23px;
			animation-duration: 407ms;
		}
		@-webkit-keyframes sound {
		  0% {
		    opacity: 0.35;
		    width: 0;
		  }
		  100% {
		    opacity: 1;
		    width: 100%;
		  }
		}

		@keyframes sound {
		  0% {
		    opacity: 0.35;
		    width: 0;
		  }
		  100% {
		    opacity: 1;
		    width: 100%;
		  }
		}
	</style>
</head>
<body>
	<div id="fullpage">
		<!-- 超炫酷的菜单按钮 -->
		<div id="menu_bar"></div>
		<div id="menu_box">
			<div class="menu_list">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
		</div>
		<div class="section">
			<ul>
				<li class="section1-img active">
					<img src="./img/section1_banner1.jpg">
				</li>
				<li class="section1-img">
					<img src="./img/section1_banner2.jpg">
				</li>
				<li class="section1-img">
					<img src="./img/section1_banner3.jpg">
				</li>
			</ul>
		</div>
		<div class="section"></div>
		<div class="section"></div>
		<div class="section"></div>
	</div>
	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript">
		var windowHeight = $(window).height();
		$('#fullpage').css({
			"height": windowHeight+'px'
		});
		var i = 0;
		setInterval(function(){
			if(i < 3){
				$('.section1-img').animate({
					"opacity": 0
				},700);
				$('.section1-img').eq(i).animate({
					"opacity": 1
				},700);
				i++;
			}else{
				i = 0;
			}
		},3000);
		
	</script>
</body>
</html>